import React from 'react';
import { Button, Tooltip } from 'antd';
import { BulbOutlined, BulbFilled } from '@ant-design/icons';
import { useTheme, ThemeType } from '../../contexts/ThemeContext';

interface ThemeToggleProps {
  className?: string;
}

const ThemeToggle: React.FC<ThemeToggleProps> = ({ className }) => {
  const { themeType, toggleTheme } = useTheme();

  return (
    <Tooltip title={themeType === 'light' ? '切换到暗色模式' : '切换到亮色模式'}>
      <Button
        type="text"
        icon={themeType === 'light' ? <BulbOutlined /> : <BulbFilled />}
        onClick={toggleTheme}
        className={className}
        aria-label="切换主题"
      />
    </Tooltip>
  );
};

export default ThemeToggle; 